<template>
  <div class="allcontent">
    <div class="search">
      <el-form @submit.native.prevent ref="queryRef" :model="searchParam">
        <el-row gutter="10">
          <el-col span="8">
            <el-form-item prop="menuName">
              <el-input  @keyup.enter.native="search" placeholder="请输入名称模糊搜索" autofocus v-model="searchParam.menuName"></el-input>
            </el-form-item>
          </el-col>
          <el-col  span="8">
            <el-form-item prop="orderStatus">
              <el-select v-model="searchParam.orderStatus" style="width:200px" placeholder="请选择状态搜索">
                <el-option
                    v-for="item in orderstatus"
                    :key="item.dataValue"
                    :label="item.dataName"
                    :value="item.dataValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col  span="8">
            <el-form-item prop="orderType">
              <el-select v-model="searchParam.orderType" style="width:200px" placeholder="请选择类型搜索">
                <el-option
                    v-for="item in ordertype"
                    :key="item.dataValue"
                    :label="item.dataName"
                    :value="item.dataValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col  span="8">
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
          <el-col  span="8">
            <el-button type="info" @click="reset(queryRef)">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="el-table">
      <el-table ref="tableRef"  :data="tableData" style="width: 100%;"  v-loading="loading">
        <el-table-column prop="menuName" label="菜单名称"/>
        <el-table-column prop="orderNumber" label="订单编号"/>
        <el-table-column prop="transactionNumber" label="交易单号"/>
        <el-table-column prop="quantity" label="交易份数"/>
        <el-table-column prop="price" label="价格"/>
        <el-table-column prop="total" label="合计"/>
        <el-table-column prop="orderStatus" label="订单状态">
          <template  #default="scope">
            <div v-for="item in orderstatus">
              <el-tag :type="item.dataValue == '0' ? 'info':'success'" v-if="item.dataValue == scope.row.orderStatus">{{item.dataName}}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderType" label="订单类型">
          <template  #default="scope">
            <div v-for="item in ordertype">
              <el-tag :type="item.dataValue == '0' ? 'primary':'success'" v-if="item.dataValue == scope.row.orderType">{{item.dataName}}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180px">
          <template #default="scope">
            {{formatTimestamp(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column prop="outTradeNo" label="订单商户号"/>
        <el-table-column prop="transactionId" label="微信支付订单号"/>
        <el-table-column prop="tradeType" label="交易类型"/>
        <el-table-column prop="tradeState" label="交易状态"/>
        <el-table-column prop="orderTime" label="下单时间">
          <template #default="scope">
            {{formatTimestamp(scope.row.orderTime)}}
          </template>
        </el-table-column>
        <el-table-column prop="tradeStateDesc" label="交易状态描述"/>
        <el-table-column prop="successTime" label="完成支付时间"/>
        <el-table-column prop="refundId" label="微信支付退款单号"/>
        <el-table-column prop="outRefundNo" label="商户退款单号"/>
        <el-table-column prop="channel" label="退款渠道"/>
        <el-table-column prop="userReceivedAccount" label="退款入账账户"/>
        <el-table-column prop="refundSuccessTime" label="退款成功时间" width="180px">
          <template #default="scope">
            {{formatTimestamp(scope.row.refundSuccessTime)}}
          </template>
        </el-table-column>
        <el-table-column prop="refundCreateTime" label="退款创建时间" width="180px">
          <template #default="scope">
            {{formatTimestamp(scope.row.refundCreateTime)}}
          </template>
        </el-table-column>
        <el-table-column prop="refundStatus" label="退款状态"/>
        <el-table-column prop="refundReason" label="退款理由"/>
        <el-table-column prop="fundsAccount" label="退款对应的资金账户"/>
        <el-table-column prop="refundAmount" label="退款金额(元)">
          <template #default="scope">
           <span v-if="scope.row.refundAmount">{{scope.row.refundAmount/100}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="closeTime" label="订单关闭时间">
          <template #default="scope">
            {{formatTimestamp(scope.row.closeTime)}}
          </template>
        </el-table-column>
        <el-table-column  label="操作" width="200" fixed="right" min-width="100">
          <template  #default="scope">
            <el-popconfirm
                v-if="scope.row.orderStatus == '1' && userStore.hasPermission('background:menuorder:update')"
                confirm-button-text="是"
                cancel-button-text="否"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="是否接收该订单?"
                @confirm="receiveBtn(scope.row.id)"
            >
              <template #reference>
                <el-button  size="small" type="primary">
                  是否接收
                </el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
                v-if="scope.row.orderStatus == '2' && userStore.hasPermission('background:menuorder:update')"
                confirm-button-text="是"
                cancel-button-text="否"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="是否完成并派送该订单?"
                @confirm="wanchengBtn(scope.row.id)"
            >
              <template #reference>
                <el-button  size="small" type="success">
                  是否完成
                </el-button>
              </template>
            </el-popconfirm>
            <el-button
                v-if="parseInt(scope.row.orderStatus) < 3 && parseInt(scope.row.orderStatus) != 5
                  && parseInt(scope.row.orderStatus) != 0 && userStore.hasPermission('background:menuorder:refund')"
                size="small" type="success" @click="refundBtn(scope.row.id)">
              退款
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="el-pager">
      <el-pagination layout="total,sizes,prev, pager, next,jumper" :total="total"
                     :page-sizes="[10,20,30,40,50]" :pager-count="11"
                     size="small"  background  class="mt-4" :current-page="currentPage"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type {ElTable, FormInstance} from 'element-plus'
import {useRouteStore} from '@/stores/route.ts'
import {page,update,refund} from '@/api/dineinordering/menuorder.ts'
import {useUserStore} from '@/stores/user.ts'
import {formatTimestamp} from "@/utils/date.ts";
import {InfoFilled} from "@element-plus/icons-vue";
const useRoute = useRouteStore();
const router = useRoute.router;
const userStore = useUserStore()
const orderstatus=userStore.getDictData('order_status')
const ordertype=userStore.getDictData('order_type')

const refundBtn=(val)=>{
  ElMessageBox.prompt('请输入退款原因', '退款', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  })
  .then(({ value }) => {
    refund({id:val,refundReason:value}).then(res=>{
      loadData()
    })
    ElMessage({
      type: 'success',
      message: '提交',
    })
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '取消',
    })
  })

}

const receiveBtn=(id)=>{
  let form = {
    id:id,
    orderStatus:'2'
  }
  update(form).then(res=>{
    if (res.code == 200){
      searchParam.page=1;
      loadData();
    }
  })
}
const wanchengBtn=(id)=>{
  let form = {
    id:id,
    orderStatus:'3'
  }
  update(form).then(res=>{
    if (res.code == 200){
      searchParam.page=1;
      loadData();
    }
  })
}

const searchParam =reactive({
  menuName:null,
  orderStatus:null,
  orderType:null,
  page:1,
  limit:10,
})
const search=()=>{
  loadData();
}
const queryRef=ref<FormInstance>();
const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  loadData();
}

const tableData = ref([]);
const total = ref(0);
const loading=ref(false);
const loadData =()=>{
  loading.value=true;
  page(searchParam).then((res)=>{
    if(res.code === 200){
      tableData.value = res.data.list;
      total.value = res.data.total;
    }
    loading.value=false;
  })
}
onMounted(()=>{
  loadData();
})
const currentPage = ref(1)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  searchParam.limit= val;
  loadData();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage.value= val;
  searchParam.page= val;
  loadData();
}
</script>

<style scoped>
.search{
  margin-bottom: 10px;
}
.el-pager{
  padding: 1%;
  justify-content: right;
}
.allcontent{
  height: 65vh;
  position: relative;
}
.el-table{
  max-height:70%;
  overflow-y: auto;
}
.el-table::-webkit-scrollbar{
  display: none;
}
</style>